<template>
    <div>
        <!-- <vmodel v-model:formData="formData"/> -->
        <!-- <Provider /> -->
        <!-- <Attrs :count="count" :updateCount="updateCount" /> -->
        <!-- <Props v-model:formData="formData"/> -->
    </div>
</template>

<script setup>
import { ref, reactive, provide } from 'vue';
// import vmodel from './components/vmodel.vue';
import Provider from './components/provider.vue';
import Attrs from './components/attrs.vue';
import Props from './components/props.vue';

const formData = reactive({
    name: 'test', 
    age: 18,
    fullInfo: 'test, 18'
});

const count = ref(100);
const updateCount = (num) => {
    count.value = num;
};

const updateFormData = (key, value) => {
    formData[key] = value;
};

provide('count', { count, updateCount });
provide('formData', { formData, updateFormData });

</script>

<style lang="scss" scoped>

</style>